<template>
  <div id="app">
      <h3><span>ToDoList</span></h3>
      <toDoHead @add-item="addItem" @recall-item="recallItem" @select-all="selectAll" :checkall="allChoose"></toDoHead>
      <toDoBody :items="showLists" :modistate="modiState" :current="currentList" :itemexist="itemExist" @toggle="toggleItem" @remove="removeItem" @settext="setText"></toDoBody>
      <toDoFoot :itemTodo="itemTodo" :current="currentList" @changeList="changeList" @cleardone="clearDone"></toDoFoot>
  </div>
</template>

<script>
import "./css/todolist.css";
import toDoHead from "./components/toDoHead.vue";
import toDoBody from "./components/toDoBody.vue";
import toDoFoot from "./components/toDoFoot.vue";
const TODO=`todolist33997`;
export default {
  name: 'App',
      //*************************数据块*****************************
  data(){
    return {
        // currentList绑定的是tab栏的状态  0表示未完成栏|1表示已完成栏|2表示全部事项栏
        currentList: 2,
        // modiState绑定的是处于修改状态的事项的id，-1表示无事项处于修改状态
        modiState: -1,
        // lastRemove维护一个删除事项列表
        lastRemove: [],
        // items绑定事项数据，从本地储存中获取
        items: JSON.parse(localStorage.getItem(TODO)) || [],
    }
  },
  created(){
        this.items=this.items.filter(ele=>!ele.isDel);
  },
      // *************************数据块*****************************
    // *************************方法块*****************************
  methods: {
        // 模拟checkbox的点击功能
        selectAll(check) {
            this.allChoose = !check;
        },
        // 添加事项的方法
        addItem(cur) {
            this.items.push({
                id: this.items.length ? this.items[this.items.length-1].id + 1 : 1,
                content: cur,
                done: false,
                isDel: false
            });
        },
        // 切换事项完成状态
        toggleItem(id) {
            const index = this.items.findIndex(ele => ele.id === id);
            this.items[index].done = !this.items[index].done;
        },
        //清除已完成事项
        clearDone() {
            this.items.forEach((ele,index) => {
                if (ele.done){
                    ele.isDel = true;
                    this.lastRemove.push(index);
                }
            });
        },
        // 移除事项
        removeItem(id) {
              if (!this.msg) {
                  this.$layer.msg(`(在输入栏使用ctrl+enter撤销删除操作)`,{time:2
                   });
                   this.msg=1;
              }
              const index = this.items.findIndex(ele => ele.id === id);
              this.lastRemove.push(index);
              this.items[index].isDel = true;
                      
        },
        // 撤回对事项的删除
        recallItem() {
            if (this.lastRemove.length) {
                this.items[this.lastRemove.pop()].isDel = false;
            }
        },
        // tab栏切换
        changeList(state) {
            this.currentList = state;
        },
        // 将对应id的事项切换至修改状态
        setText(id, state) {
            this.modiState = state ? id : -1;
        }
    },
     // **************************侦听器块*************************
    watch: {
        // 侦听items的变化，发生变化则将更新入本地储存
        items: {
            deep: true,
            handler(newVal) {
                localStorage.setItem(TODO, JSON.stringify(newVal));
            }
        }
    },
    // ***************************侦听器块*************************
     // ***************************计算属性块***********************
    computed: {
        allChoose: {
            // 全选框点击时，点击事件会给allChoose进行赋值操作，触发set方法
            set(check) {
                this.items.forEach(ele => ele.isDel ? 0 : ele.done = check);
            },
            // 计算属性与items数据绑定，发生变化时触发get方法
            get() {
                return this.items.some(ele => !ele.isDel) && this.items.every(ele => ele.isDel || ele.done);
            }
        },
        // 判断未被删除的事项的数量的计算属性
        itemExist() {
            return this.showLists.reduce((total, cur) => cur.isDel ? total : total += 1, 0);
        },
        showLists(){
            return this.items.filter(ele=>(!ele.isDel&&(ele.done==this.currentList||this.currentList===2)));
        },
        itemTodo(){
            return this.items.reduce((total, cur) => cur.isDel||cur.done ? total : total += 1, 0);
        }
    },
    // ****************************计算属性块*************************
  components: {
    toDoHead,
    toDoBody,
    toDoFoot,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
